<template>
  <el-dialog
    v-el-drag-dialog
    width="800px"
    :title="formName"
    :visible="show"
    @update:visible="updateShow"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="130px"
    >
      <el-form-item label="分润方案：" prop="SpName">
        <el-input v-model="form.SpName" style="width: 500px" />
      </el-form-item>
      <el-form-item label="补贴时间：" prop="SubsidyDate">
              <el-input
                  type="number"
                  v-model="form.SubsidyDate"
                  min="0"
                  @keyup.native="proving2($event)"
                  class="w300 "
                >
                  <template slot="append">天</template>
                </el-input>
      </el-form-item>

      <!-- <el-form-item label="分润时间：" prop="timeValue">
        <el-date-picker
          style="width: 500px"
          class="flex-1"
          v-model="form.timeValue"
          value-format="yyyy-MM-dd hh:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="备注：" prop="Remark">
        <el-input
          style="width: 500px"
          class="flex-1"
          type="textarea"
          placeholder="请输入内容"
          v-model="form.Remark"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="m-b-1 float_none">
      <el-button class="float_right" @click="addladderArray"
        >新增阶梯方案</el-button
      >
    </div>
    <div class="auto-scroll">
      <div
        class="flex m-t-1 align-center space-between ladder_item"
        v-for="(item, index) of form.Mains"
        :key="index"
      >
        <i class="el-icon-circle-close" @click="deleteladderArray(index)"></i>
        <el-input
          class="ladder_name none-padding"
          v-model="item.StairName"
          placeholder="阶梯方案名"
        ></el-input>
        <div class="flex-1">
          <div
            class="flex align-center space-between ladder_cell"
            v-for="(cell, idx) of item.Settings"
            :key="idx"
          >
            <div class="flex align-center">
              <el-input
                class="ladder_name none-padding"
                v-model="cell.TargetName"
                placeholder="阶段名"
              ></el-input>
              <el-input
                type="number"
                v-model="cell.TargetNum"
                min="0"
                @keyup.native="proving2($event)"
                class="w100 none-padding"
              >
                <template slot="append">元</template>
              </el-input>
              <!-- <i
                class="el-icon-circle-close m-l-1"
                @click="deleteladList(index, idx)"
              ></i> -->
            </div>
            <div>
              <p
                class="flex align-center"
                v-for="(limi, i) of cell.Ratios"
                :key="i"
              >
                <!-- <el-input
                  v-model="limi.ShareName"
                  class="sellName"
                  placeholder="销售方案"
                ></el-input> -->
                <el-select
                  v-model="limi.ShareType"
                  placeholder="销售方案"
                  class="sellName w100 none-padding"
                >
                  <el-option
                    v-for="item in Shareoptions"
                    :key="item.EnumValue"
                    :label="item.Desction"
                    :value="item.EnumValue"
                  >
                  </el-option>
                </el-select>
                <el-input
                  type="number"
                  v-model="limi.ShareRation"
                  placeholder="分润比例"
                  min="0"
                  @keyup.native="proving2($event, '%')"
                  class="w100 none-padding"
                >
                  <template slot="append">%</template>
                </el-input>
                 <span class="m-l-1 px12 nowrap">补贴：</span>
                <el-input
                  type="number"
                  v-model="limi.Subsidy"
                  placeholder="补贴比例"
                  min="0"
                  @keyup.native="proving2($event, '%')"
                  class="w100 none-padding"
                >
                  <template slot="append">%</template>
                </el-input>
                <i v-if="cell.Ratios.length != 1"
                  class="el-icon-circle-close m-l-1"
                  @click="deletelimi(index, idx, i)"
                ></i>
              </p>
              <el-button size="small" type="info" @click="pushlimi(index, idx)"
                >插入</el-button
              >
            </div>
          </div>
          <!-- <el-button size="small" type="info" @click="pushLadder(index)"
            >插入</el-button
          > -->
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateShow(false)"> 取消 </el-button>
      <el-button type="primary" @click="save"> 保存 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from '@/utils'
import { saveShare, getShareDetail, GetOrderType } from '@/api/system/share-manage'
import { mapState } from 'vuex'

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        SubsidyDate:1
      },
      formTmpl: {
        SubsidyDate:1,
        Mains: [
          {
            Id: '00000000-0000-0000-0000-000000000000',
            StairName: "",
            SerialNum: 1,
            Settings: [
              {
                Id: '00000000-0000-0000-0000-000000000000',
                TargetName: '',
                TargetNum: 0,
                Ratios: [
                  {
                    Id: '00000000-0000-0000-0000-000000000000',
                    ShareName: "",
                    ShareRation: 0,
                    Subsidy:0
                  }
                ]
              }
            ],
          }
        ]
      },
      rules: {
        SpName: [
          { required: true, message: '名称必填', trigger: 'blur' },
          { min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        SubsidyDate:[
            { required: true, message: '必填', trigger: 'blur' },
        ]
        // timeValue: [
        //   { required: true, message: '时间必填', trigger: 'blur' },
        // ]
      },
      Shareoptions: []
    }
  },
  computed: {
    formName () {
      if (this.form.Id) {
        return '编辑'
      }
      return '新增'
    },
    ...mapState({
      userId: state => state.user.id,
    }),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        this.form = deepClone({ ...this.formTmpl, ...val })
        // if (this.form.StartTime) {
        //   // this.form.timeValue = [this.form.StartTime, this.form.EndTime]
        //   this.$set(this.form, 'timeValue', [this.form.StartTime, this.form.EndTime])
        // }
        if (this.form.Id) {
          this.getDetail()
        }
      }
    }
  },

  methods: {
    updateShow (val) {
      this.$emit('update:show', val)
    },
    afterSave () {
      this.$notify({
        title: '操作成功',
        message: 'success',
        type: 'success',
        duration: 2000
      })
      this.updateShow(false)
      this.$emit('finish')
      console.log(this.$emit('finish'))
    },
    getShareName (ShareType) {
      let obj = this.Shareoptions.find(item => item.EnumValue == ShareType)
      return obj.Desction
    },
    save () {
      this.$refs['dataForm'].validate((valid) => {
        const formData = deepClone(this.form)
        // formData.StartTime = this.form.timeValue[0]
        // formData.EndTime = this.form.timeValue[1]
        formData.IsSystem = 1
        // delete formData['timeValue']
        // getShareName
        for (let item of formData.Mains) {
          for (let cell of item.Settings) {
            cell.TargetNum = Number(cell.TargetNum)
            for (let limi of cell.Ratios) {
              limi.ShareRation = Number(limi.ShareRation)
              limi.Subsidy = Number(limi.Subsidy)
              limi.ShareName = this.getShareName(limi.ShareType)
            }
          }
        }
        if (valid) {
          if (this.form.Id) {
            saveShare(formData).then(() => {
              this.afterSave()
            })
          } else {
            saveShare(formData).then(() => {
              this.afterSave()
            })
          }
        }
      })
    },
    async getDetail () {
      const { data } = await getShareDetail({
        Id: this.form.Id
      })
      this.form = deepClone({ ...this.formTmpl, ...data })
      // if (this.form.StartTime) {
      //   // this.form.timeValue = [this.form.StartTime, this.form.EndTime]
      //   this.$set(this.form, 'timeValue', [this.form.StartTime, this.form.EndTime])
      // }
    },
    addladderArray () {
      let num = this.form.Mains.length
      this.form.Mains.push({
        Id: '00000000-0000-0000-0000-000000000000',
        StairName: "",
        SerialNum: num + 1,
        Settings: [
          {
            Id: '00000000-0000-0000-0000-000000000000',
            TargetName: '',
            TargetNum: 0,
            Ratios: [
              {
                Id: '00000000-0000-0000-0000-000000000000',
                ShareName: "",
                ShareType: "",
                ShareRation: 0,
                Subsidy:0
              }
            ]
          }
        ],
      })
    },
    deleteladderArray (index) {
      this.form.Mains.splice(index, 1)
    },
    //插入多一个 第几阶段
    pushLadder (index) {
      this.form.Mains[index].Settings.push({
        Id: '00000000-0000-0000-0000-000000000000',
        TargetName: '',
        TargetNum: 0,
        Ratios: [
          {
            Id: '00000000-0000-0000-0000-000000000000',
            ShareName: "",
            ShareType: "",
            ShareRation: 0,
            Subsidy:0
          }
        ]
      })
    },
    // deleteladList (index, idx) {
    //   this.form.Mains[index].Settings.splice(idx, 1)
    // },
    //插入一个销售
    pushlimi (index1, index2) {
      this.form.Mains[index1].Settings[index2].Ratios.push({
        Id: '00000000-0000-0000-0000-000000000000',
        ShareName: "",
        ShareType: "",
        ShareRation: 0,
        Subsidy:0
      })
    },
    deletelimi (index, idx, i) {
      this.form.Mains[index].Settings[idx].Ratios.splice(i, 1)
    },
    GetShareoptionsFun () {
      GetOrderType().then(res => {
        this.Shareoptions = res.Data
      })
    }
  },
  created () {
    this.GetShareoptionsFun()
  },
}
</script>
<style  scoped>
.auto-scroll .flex > .el-input {
  width: 80px;
}
.ladder_item {
  width: 95%;
  border-bottom: 1px solid #cecece;
  padding: 5px 0;
}
.ladder_cell + .ladder_cell {
  border-top: 2px dashed #f6bcbc;
}
.ladder_cell {
  padding: 5px 0;
}
.ladder_name {
  width: 100px !important;
  margin-right: 3%;
}
.sellName {
  width: 100px !important;
}
.auto-scroll {
  overflow-y: auto;
  max-height: 300px;
  border-top: 1px solid rgb(240, 240, 240);
}
.auto-scroll >>> .el-input-group__append {
  padding: 0 !important;
}
.auto-scroll >>> .el-input-group--append .el-input__inner {
  padding: 0 !important;
}
.el-icon-circle-close {
  font-size: 18px;
  transition: color 0.25s linear;
}
.el-icon-circle-close:hover {
  color: #cecece;
  cursor: pointer;
}
.ladder_cell > div {
  width: 48%;
}
.w100 {
  width: 100px !important;
}
.w300{
   width: 200px !important;
}
.none-padding >>> .el-input__inner {
  padding: 0 0 0 6px !important;
  font-size: 12px;
}
</style>
